<template>
	<view>
		<!-- PC -->
		<view v-if="screenWidth>480">
			<view class="contentrow bg-white">
				<view class="label-recommend"> 热门推荐 </view>
				<view class="sub-row">
					<view v-for="(item, index) in category" @click="SwitchVariety(index,item.Category_SerialNumber)" :key="index"
						:class="(Variety==index? 'sub text-'+ThemeColors:'sub')" style="cursor: pointer;">{{ item.Category_Name }}</view>
				</view>
			</view>
			<yTable :loading="loading" @row-click="handleDetail" @limitval="limitval" @pageval="pageval" :page="form.page" :limit="form.limit" :total="total" :tableData="tableData" height="calc(100vh - 140px)">
				<el-table-column align="center" label="采购品种" width="180">
					<template v-slot="{row}">
						<view class="w-100 text-ellipsis flex align-center justify-center" :title="row.Article_Name">
							<text>{{row.Article_Name}}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="采购名称" width="180">
					<template v-slot="{row}">
						<view class="w-100 text-ellipsis flex align-center justify-center" :title="row.Category_Name">
							<text>{{row.Category_Name}}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="Total_Quantity" label="采购数量" width="180">
					<template v-slot="{row}">
						<view class="w-100 text-ellipsis" :title="row.Total_Quantity+'/'+row.Unit">
							<text>{{row.Total_Quantity+'/'+row.Unit}}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="所属企业">
					<template v-slot="{row}">
						<view class="w-100 text-ellipsis" :title="row.Enterprise_Name">
							<text>{{row.Enterprise_Name}}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="发布人">
					<template v-slot="{row}">
						<view class="w-100 text-ellipsis" :title="row.Contacts">
							<text>{{row.Contacts}}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="认证情况">
					<template v-slot="{row}">
						<image style="width: 40rpx;height: 40rpx;" src="@/static/icon/order-success.png" mode=""></image>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="address" :label="''">
					<template v-slot="{row}">
						<text :class="'text-'+ThemeColors">查看详情</text>
					</template>
				</el-table-column>
			</yTable>
		</view>
		<!-- 移动端 -->
		<view v-else-if="screenWidth<=480" class="mb-5 bg-grey">
			<view class="bg-white flex w-100 border-top border-grey" style="box-sizing: border-box; height: 80rpx;">
				<view class="flex justify-center align-center border-right border-grey" style="position: relative; box-sizing: border-box; width: 50%;">
					<text class="font">类别<i class="dropdown-arrow icon-triangle-down"></i></text>
				</view>
				<view class="flex justify-center align-center" style="position: relative; width: 50%;">
					<text class="font">地区<i class="dropdown-arrow icon-triangle-down"></i></text>
				</view>
			</view>
			<!-- 列表 -->
			<view class="flex flex-column align-center my-2  pb-2" style="width: 100%;">
				<view @click="handleDetail(item)" v-for="(item,index) in tableData" :key="item.Group_Seek_Purchase_SerialNumber" class="py-3 mb-2 rounded-lg bg-white" style="width: 95%;position: relative;">
					<view class="mx-3" style="position: relative;">
						<text class="font">{{item.Article_Name}}</text>
						<text class="font-sm text-muted" style="position: absolute;right: 0;">45分钟前</text>
					</view>
					<view class="mx-3 mt-2 mb-4">
						<text class="font mr-2" :class="'text-'+ThemeColors">{{item.Residue_Quantity}}{{item.Unit}}</text>
						<!-- <text class="font mx-2 px-1 text-white rounded" :class="'bg-'+ThemeColors">每周采购</text> -->
						<text class="font px-1 text-white rounded" :class="'bg-'+ThemeColors">认证</text>
					</view>
					<view class="mx-3 mb-2">
						<!-- <text class="font text-muted">期望货源地：全国</text> -->
						<text class="font text-muted">联系人：{{item.Contacts}}</text>
					</view>
					<view class="mx-3">
						<text class="font text-muted">所属企业：{{item.Enterprise_Name}}</text>
						<!-- <text class="font text-muted">收货地：湖南省常德市</text> -->
					</view>
					<view class="border flex justify-center align-center rounded-lg" :class="'border-'+ThemeColors"
						style="width: 120rpx;height: 50rpx; position: absolute; right: 30rpx; bottom: 30rpx;">
						<text class="font-sm" :class="'text-'+ThemeColors">去联系</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from '@/components/yHeader.vue'
	import yFooter from '@/components/yFooter.vue'
	import yTable from '@/components/yTable.vue'
	import { GroupSeekProcureAll,GroupSeekProcureAllAction  } from "@/api/group.js";
	import { GoodsFileInquiry } from "@/api/global.js"
	import { Message } from "element-ui"
	export default {
		components: {
			yHeader,
			yFooter,
			yTable,
		},
		data() {
			return {
				screenWidth:uni.getSystemInfoSync().windowWidth,
				ThemeColors:app.globalData.ThemeColors,
				Variety:0,
				form: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					Type: "0",
					page: 1, //页数
					limit: 10, //每页数据条数
				},
				total:0,
				category: [{
					Category_SerialNumber: '',
					Category_Name: '全部'
				}],
				loading:true,
				tableData: [],
			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll)
			this.getData(this.form)
			this.getList()
		},
		methods: {
			handleTabs(url){
				uni.navigateTo({
					url
				})
			},
			handleScroll(){
				const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
				// 获取页面的可视高度
				const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
				// 获取页面的总高度
				const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
				// 判断是否滑动到底部
				if (scrollTop + clientHeight >= scrollHeight&&this.screenWidth<=480) {
				    // 执行你想要执行的函数
				    if(this.total>this.tableData.length){
				    	this.getData_m(this.form)
				    }
				}
			},
			async getData(data) {//分页查询所有采购交易
				const res = await GroupSeekProcureAllAction({
					data,
				})
				if(res.redirect&&res.redirect=='REDIRECT'){
					uni.removeStorageSync('loginInfo');
					const res = await GroupSeekProcureAll({
						data,
					})
					if(res.Status=='success'){
						this.tableData = res.tableData;
						this.total = Number(res.limit)
						this.loading = false
					}
				}else if(res.Status=='success'){
					this.tableData = res.tableData;
					console.log(this.tableData)
					this.total = Number(res.limit)
					this.loading = false
				}
			},
			async getData_m(data) { //移动端适配
				this.form.page ++
				const res = await GroupSeekProcureAllAction({
					data:this.form
				})
				if(res.redirect&&res.redirect=='REDIRECT'){
					uni.removeStorageSync('loginInfo');
					const res = await GroupSeekProcureAll({
						data:this.form,
					})
					if(res.Status=='success'){
						this.tableData.push(...res.tableData);
					}
				}else if(res.Status=='success'){
					this.tableData.push(...res.tableData);
				}
			},
			async getList(){
				//类别
				const res = await GoodsFileInquiry({
					data:{
						Data: "category",
					},
				})
				this.category.push(...res)
			},
			SwitchVariety(i,e){//切换品种
				if (this.form.Category_SerialNumber == e) {//重复点击不允许调接口
					return
				}
				this.Variety = i
				this.form.Category_SerialNumber = e
				this.form.page = 1
				this.getData(this.form)
			},
			pageval(e){
				this.form.page = e
				this.getData(this.form)
			},
			limitval(e){
				this.form.page = 1
				this.form.limit = e
				this.getData(this.form)
			},
			handleDetail(row){
				uni.navigateTo({
					url:"/pages/detail/purchase-detail?Group_Seek_Purchase_SerialNumber="+row.Group_Seek_Purchase_SerialNumber
				})
			}
		}
	}
</script>

<style lang="scss">
	.icon-triangle-down {
	    width: 0;
	    height: 0;
		margin-left: 5px;
	    border: 4px solid #535b62;
	    border-right-color: transparent;
		 border-left-color: transparent;
		 border-bottom: none;
	     /*兼容IE6及其以下*/
		_border-right-color: #fff;
		_border-right-color: #fff;
		position: absolute;
		top:20px;
	}
	.drop-down:hover .icon-triangle-down {
	    border-top: none;
		border-bottom-width: 4px;
		border-bottom-style: solid;
	}

	.content {
		width: 2400rpx;
		height: 100%;
		margin: 0 auto;
	}

	.contentrow {
		border: 1px solid #ddd;
		border-top: 0;
	}

	.label-recommend {
		font-size: 28rpx;
		color: #45b035;
		padding-left: 40rpx;
		border-bottom: 1px dashed #efefef;
		line-height: 100rpx;
	}

	.sub-row {
		display: flex;
		padding-left: 20rpx;
		border-bottom: 1px dashed #efefef;
		font-size: 28rpx;
		letter-spacing: 0.7px;
		position: relative;
		height: 100rpx;
		overflow-y: hidden;
	}

	.sub {
		transition: all 0.5s;
		padding: 20rpx 0;
		margin: 10rpx 20rpx;
		line-height: 42rpx;
	}
</style>